<template>
  <div class="flex gc-4">
    <a-dropdown placement="bottomRight">
      <a-button type="primary">
        上传
        <DownOutlined class="text-12" />
      </a-button>
      <template #overlay>
        <a-menu style="height: fit-content">
          <a-menu-item @click="uploadFile" :disabled="!currentPath">上传文件</a-menu-item>
          <a-menu-item @click="upload" :disabled="!currentPath">上传文件夹</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup lang="ts">
import { uploadFiles } from '@/api/modules/tool/file/file';
import { useFileDialog } from '@vueuse/core';
import { loadPath } from '../data/action';
import { currentPath, selectedFile } from '../data/data';
import type { UploadFile } from '../data/types';
import { useUploadFile } from '@/utils/file/file';

const { files, open, reset, onChange } = useFileDialog({
  accept: '*',
  directory: true,
  multiple: true,
});

const upload = () => {
  open();
};

onChange(async () => {
  if (files.value) {
    const fileList: UploadFile[] = Array.from(files.value).map(f => {
      return {
        file: f,
        path: f.webkitRelativePath || f.name,
      };
    });
    await uploadFiles({
      files: fileList,
      root: currentPath.value,
    });
    loadPath();
    reset();
  }
});
const uploadFile = async () => {
  const files = await useUploadFile({
    accept: '*',
    multiple: true,
  });
  await uploadFiles({
    files: files.map(e => {
      return {
        file: e,
        path: e.webkitRelativePath || e.name,
      };
    }),
    root: currentPath.value,
  });
};
</script>

<style lang="scss" scoped></style>
